<template>
  <div class="app-main">
    <div class="app-container">
      <!-- 设置el-tree组件的点击属性-(点击树不可以折叠，只有点击折叠展开图标才可以) -->
      <el-tree :data="dataList" :props="defaultProps" :expand-on-click-node="false" default-expand-all>
        <template v-slot="{ data }">
          <el-row style="width:100%;height:40px" type="flex" justify="space-between" align="middle">
            <el-col :span="21"><div>{{ data.name }}</div></el-col>
            <el-col :span="3">
              <!-- 因为右侧有两个按钮 需要添加两个span标签 -->
              <div class="box-right">
                <span class="left-col">{{ data.managerName }}</span>
                <!-- 需要去element导入一个下拉框 -->
                <span class="right-col">
                  <!-- 通过给父组件注册 @Command方法 然后给子组件注册Command="Add"方法 实现一个方法 三个组件使用 -->
                  <el-dropdown @command="HandleCommand($event,data.id)">
                    <!-- 显示区域内容 -->
                    <span class="el-dropdown-link">
                      操作
                      <i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <!-- 下拉菜单选项 -->
                    <el-dropdown-menu slot="dropdown">
                      <!-- 正常思维来说，点击事件，是给下面3个Div分别绑定一个 @Click事件 -->
                      <!-- 我在工作里面，有了一些优化的手段，减少事件的绑定 -->
                      <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                      <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                      <el-dropdown-item command="del">删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </span>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </div>
    <!-- 点击弹窗 需要进行父子通信 把点击出现弹窗传递到封装的弹框里面去 -->
    <!-- 使用了sync修饰符，可以监听子组件传过来的 update:属性名的事件，直接将父组件的值进行修改 -->
    <addDept
      :show-dialog.sync="showDialog"
      :department-list="departmentList"
      :current-node-id="currentNodeId"
      :is-edit.sync="isEdit"
      @add-success="getDepartment"
    />
  </div>
</template>

<script>
// 导入封装好的获取部门列表的axios
import { getDepartmentRequest, deleteDepartmentRequest } from '@/api/department'
// 导入封装的递归函数
import { transListToTreeData } from '@/utils/index'
// 导入局部组件
import addDept from '@/views/department/components/addDept.vue'
export default {
  name: 'Department',
  // 注册局部组件
  components: { addDept },
  data() {
    return {
      // 声明一个变量 isEdit  来监控点击的是编按钮 再通过父传了 把false或者true传递给了组件 从而控制弹框上的文字
      isEdit: false,
      // 声明变量控制弹层显示隐藏
      showDialog: false,
      // 声明一个数组接收递归后的树形数组 渲染页面数据
      dataList: [],
      // 声明一个数据 便于表单里面的数据验证
      departmentList: [],
      // 声明一个响应式数据记录该id
      currentNodeId: '', // 存储当前点击的id
      /* data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }], */
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  // 通过created钩子调用axios
  created() {
    this.getDepartment()
  },
  methods: {
    async getDepartment() {
      const res = await getDepartmentRequest()
      //  console.log(res)
      // 把响应回来的数据赋值给一个空数组 然后进行页面的渲染
      this.dataList = res.data.data
      // 调用递归函数 并把响应回来的数据进行递归转换为树形数组然后 渲染页面
      this.dataList = transListToTreeData(res.data.data, 0)
      // 把响应的数据赋值给一个空数组 便于表单里面的数据验证
      this.departmentList = res.data.data
    },
    // 注册添加子部门/编辑部门/删除部门事件
    HandleCommand(type, id) {
      console.log(type, id)
      // 存储id
      this.currentNodeId = id
      console.log(this.currentNodeId)
      // 条件判断 若点击的是add 则弹层显示出来
      if (type === 'add') {
        // 声明的变量 控制 弹框文字 false 代表新增按钮
        this.isEdit = false
        this.showDialog = true
      } else if (type === 'del') {
        this.$confirm('您确认要删除该部门吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          // 发送删除的ajax
          await deleteDepartmentRequest(id)
          // 调用函数渲染页面
          this.getDepartment()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        // 点击编辑按钮 启动弹窗
        this.showDialog = true
        // 声明的变量 控制 弹框文字 true代表的是编辑按钮
        this.isEdit = true
        console.log(type, id)
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.app-main {
  padding: 10px;
  background: #f5f6f8;
  .app-container {
    padding: 30px 140px;
    font-size: 14px;
    background: #fff;
    color: #606266;
  }
  .box-right {
    display: flex;
    justify-content:space-between

  }
}
</style>
